<template>
  <view class="container">
    <!-- 景点选择 -->
    <view class="spot-filter">
      <view class="filter-label">选择景点：</view>
      <picker 
        v-if="spotList.length > 0" 
        @change="handleSpotChange" 
        :value="spotIndex" 
        :range="spotList" 
        :range-key="'text'"
        :disabled="loading"
      >
        <view class="picker">
          <text>{{ currentSpot }}</text>
          <uni-icons type="bottom" size="12" color="#666"></uni-icons>
        </view>
      </picker>
    </view>

    <!-- 攻略列表 -->
    <view class="guide-list">
      <view class="guide-item" v-for="guide in guideList" :key="guide.guideId" @click="goToDetail(guide.guideId)">
        <image :src="IMAGE_BASE + guide.image" mode="scaleToFill" class="guide-image"></image>
        <view class="guide-info">
          <view class="guide-title">{{ guide.title }}</view>
          <view class="guide-meta">
            <text class="author">作者：{{ guide.author }}</text>
            <text class="time">{{ guide.createTime }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="guideList.length === 0">
      <image src="/static/images/empty.png" mode="aspectFit"></image>
      <text>暂无攻略信息</text>
    </view>
  </view>
</template>

<script>
import { getGuideList } from '@/api/guide.js'
import { searchSpots } from '@/api/spots.js'
import config from '../../api/config.js'

export default {
  data () {
    return {
      spotList: [], // 格式化后的景点列表数据
      spotIndex: 0,
      guideList: [],
      IMAGE_BASE: config.image_base,
      loading: false
    }
  },
  computed: {
    currentSpot () {
      if (!this.spotList.length) return '全部景点'
      return this.spotList[this.spotIndex]?.text || '全部景点'
    }
  },
  onLoad () {
    this.getSpotList()
  },
  methods: {
    // 获取景点列表
    getSpotList () {
      this.loading = true
      searchSpots().then(res => {
        if (res.code === 200) {
          // 格式化数据，符合picker要求
          this.spotList = [
            { value: null, text: '全部景点' },
            ...res.data.map(item => ({
              value: item.spotId,
              text: item.spotName
            }))
          ]
          // 获取攻略列表
          this.getGuides()
        }
      }).finally(() => {
        this.loading = false
      })
    },
    // 获取攻略列表
    getGuides () {
      this.loading = true
      const spotId = this.spotList[this.spotIndex]?.value
      getGuideList(spotId).then(res => {
        if (res.code === 200) {
          this.guideList = res.data
        }
      }).finally(() => {
        this.loading = false
      })
    },
    // 景点选择变化
    handleSpotChange (e) {
      if (this.loading) return
      this.spotIndex = Number(e.detail.value)
      this.getGuides()
    },
    // 跳转到详情
    goToDetail (guideId) {
      if (this.loading) return
      uni.navigateTo({
        url: `/pages/guide/detail?id=${guideId}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  display: block;
}

.spot-filter {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 12rpx;

  .filter-label {
    font-size: 28rpx;
    color: #333;
    margin-right: 20rpx;
  }

  .picker {
    flex: 1;
    font-size: 28rpx;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10rpx 20rpx;
    background: #f5f5f5;
    border-radius: 8rpx;

    &.disabled {
      opacity: 0.6;
    }
  }
}

.guide-list {
  .guide-item {
    background: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    overflow: hidden;

    .guide-image {
      width: 100%;
      height: 300rpx;
    }

    .guide-info {
      padding: 20rpx;

      .guide-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;
      }

      .guide-desc {
        font-size: 28rpx;
        color: #666;
        margin-bottom: 20rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .guide-meta {
        display: flex;
        justify-content: space-between;
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;

  image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }

  text {
    font-size: 28rpx;
    color: #999;
  }
}
</style>